<template>
	<view class="wanl-comment" style="display: flex;flex-direction: column;align-items: center;">
		<view class="edgeInsetTop"></view>
		<view style="display: flex;flex-direction: column;align-items: center;"
			class="subject margin-lr-bj bg-white radius-bock margin-bottom-bj" v-for="(item, index) in goodsList"
			:key="item.id">
			<view style="margin-left: 6.93vw;bob" class="goods padding-bj">
				<view style="width: 21.33vw;height: 21.33vw;" class="cu-avatar radius-bock"
					:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.image, 40,40) + ')' }"></view>
				<view class="content">
					<!-- <view class="text-lg text-cut">
						<text>{{item.title}}</text>
					</view>
					<view class="wanl-gray-dark">{{item.difference}}</view> -->
					<view class="score flex">
						<view class="title mr">清洁评价</view>
						<wanl-rate :quantity="5" :current="shop.describe" :size="22" normal="#9C9C9C" active="#FF4646"
							:hollow="false" @change="describeChange" />
						<!-- <view class="margin-left wanl-gray-light">
						{{shop.describeInfo}}
					</view> -->
					</view>
					<view class="score  flex " style="margin: 2vw 0;">
						<view class="title mr">美容评价</view>
						<wanl-rate :quantity="5" :current="shop.logistics" :size="22" normal="#9C9C9C" active="#FF4646"
							:hollow="false" @change="logisticsChange" />
						<!-- <view class="margin-left wanl-gray-light">
						{{shop.logisticsInfo}}
					</view> -->
					</view>
					<view class="score flex">
						<view class="title mr">护理评价</view>
						<wanl-rate :quantity="5" :current="shop.service" :size="22" normal="#9C9C9C" active="#FF4646"
							:hollow="false" @change="serviceChange" />
						<!-- 	<view class="margin-left wanl-gray-light">
						{{shop.serviceInfo}}
					</view> -->
					</view>
					<view class="score flex">
						<view class="title mr">寄养评价</view>
						<wanl-rate :quantity="5" :current="shop.service" :size="22" normal="#9C9C9C" active="#FF4646"
							:hollow="false" @change="jiyanChange()" />
						<!-- 	<view class="margin-left wanl-gray-light">
						{{shop.serviceInfo}}
					</view> -->
					</view>
					<view class="score flex">
						<view class="title mr">服务评价</view>
						<wanl-rate :quantity="5" :current="shop.service" :size="22" normal="#9C9C9C" active="#FF4646"
							:hollow="false" @change="fuwuChange()" />
						<!-- 	<view class="margin-left wanl-gray-light">
						{{shop.serviceInfo}}
					</view> -->
					</view>
					<view class="score flex">
						<view class="title mr">技师评价</view>
						<wanl-rate :quantity="5" :current="shop.service" :size="22" normal="#9C9C9C" active="#FF4646"
							:hollow="false" @change="jishiChange()" />
						<!-- 	<view class="margin-left wanl-gray-light">
						{{shop.serviceInfo}}
					</view> -->
					</view>
				</view>
			</view>
			<!-- 	<view class="comment padding-lr-bj padding-top-bj">
				<view class="comment-title">宝贝评价</view>
				<view class="comment-operate">
					<view class="item" :class="{action:item.state==0}"  @tap="stateType(0,index)">
						<text class="wlIcon-haoping"></text>
						好评
					</view>
					<view class="item" :class="{action:item.state==1}" @tap="stateType(1,index)">
						<text class="wlIcon-chaping"></text>
						中评
					</view>
					<view class="item" :class="{action:item.state==2}" @tap="stateType(2,index)">
						<text class="wlIcon-chaping"></text>
						差评
					</view>
				</view>
			</view> -->
			<view style=" position: relative; width: 94.66vw;height: 50.4vw;"
				class="describe cu-form-group margin-bj radius-bock padding-bj">
				<textarea style="width: 100%;height: 100%; color: #9C9C9C;  " maxlength="-1" v-model="item.comment"
					placeholder="请发表符合评价规则的评论,超过10个字即可获得积分"></textarea>
				<view style="position: absolute;right: 5vw;bottom: 4vw;font-size: 2.93vw;color: #9C9C9C;" class="">
					再写<text style="color:#11E195 ;">{{(10 - item.comment.length)>0? 10 - item.comment.length:0}}
					</text>个字可获得积分
				</view>
			</view>
			<!-- 上传图片 -->
			<view class="upload cu-form-group padding-lr-bj" style="">
				<view class="grid col-4 grid-square flex-sub"
					style="margin-top: 2.93vw;  box-shadow: 0px 0px 0.8vw 0px rgba(0, 0, 0, 0.05);  width: 94.66vw;height: 29.33vw; display: flex;justify-content: center;align-items: center;">
					<view class="bg-img" v-for="(vo, key) in item.imgList" :key="key" @tap="viewImage(index,key)">
						<image :src="$wanlshop.oss(vo, 40,40)" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg(index, key)"><text class="wlIcon-31guanbi"></text>
						</view>
					</view>
					<view class="solids" @tap="chooseImage(index)" v-if="item.imgList.length < 4">
						<text class="wlIcon-tupian1"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="operate margin-bj padding-bj bg-white radius-bock" v-if="shop.shopname">
			<!-- <view class="operate-title" @tap="onShop(shop.id)">
				<text class="wlIcon-dianpu1 margin-right-sm"></text>
				{{shop.shopname}}
			</view> -->

			<!-- <view class="score">
				<view class="title">服务态度</view>
				<wanl-rate :quantity="5" :current="shop.deliver" :size="25" normal="#cad0cc" active="#ff4e02" :hollow="true" @change="deliverChange" />
				<view class="margin-left wanl-gray-light">
					{{shop.deliverInfo}}
				</view>
			</view> -->
		</view>
		<view class="edgeInsetBottom"> </view>
		<view class="wanlian cu-bar tabbar foot flex flex-direction"><button @tap="addData()"
				style=" color: white;  background-color: #11E195; border-radius: 106.93vw; "
				class="cu-btn  lg">提交</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: 0,
				shop: {
					id: 0,
					shopname: '',
					describe: 0,
					describeInfo: '',
					logistics: 0,
					logisticsInfo: '',
					service: 0,
					serviceInfo: '',
					deliver: 0,
					deliverInfo: ''
				},
				goodsList: []
			};
		},
		onLoad(option) {
			this.loadData(option.order_id);
		},
		methods: {
			async loadData(order_id) {
				this.$api.get({
					url: '/wanlshop/order/getOrderInfo',
					data: {
						id: order_id
					},
					success: res => {
						this.order_id = res.id;
						this.shop.id = res.shop_id;
						this.shop.shopname = res.shop.shopname;
						var newItems = [];
						res.goods.forEach((item, index) => {
							newItems.push({
								id: item['id'],
								goods_id: item['goods_id'],
								difference: item['difference'],
								image: item['image'],
								title: item['title'],
								imgList: [],
								comment: '',
								state: 0
							});
						})
						this.goodsList = newItems;
					}
				});
			},
			// 提交评论
			async addData() {
				// 判断是否给店铺评分，其他可以不填写，默认好评|| this.shop.deliver == 0
				if (this.shop.describe == 0 || this.shop.logistics == 0 || this.shop.service == 0) {
					this.$wanlshop.msg('请给店铺评分');
					return false;
				}
				let data = {
					order_id: this.order_id,
					shop: {
						id: this.shop.id,
						describe: this.shop.describe,
						logistics: this.shop.logistics,
						service: this.shop.service,
						deliver: this.shop.deliver
					},
					goodsList: this.goodsList
				};
				this.$api.post({
					url: '/wanlshop/order/commentOrder',
					data: data,
					success: res => {
						this.$store.commit('statistics/order', {
							evaluate: this.$store.state.statistics.order.evaluate - 1
						});
						this.$wanlshop.to('/pages/page/success?type=comment');
					}
				});
			},
			stateType(type, index) {
				this.goodsList[index].state = type;
			},
			viewImage(index, key) {
				uni.previewImage({
					urls: this.goodsList[index].imgList,
					current: this.goodsList[index].imgList[key]
				});
			},
			delImg(index, key) {
				this.goodsList[index].imgList.splice(key, 1);
			},
			chooseImage(index) {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						this.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											this.$api.upload({
												url: updata.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.storage ==
													'local' ? null : updata
													.multipart,
												success: data => {
													this.goodsList[index]
														.imgList.push(data
															.fullurl);
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			describeChange(e) {
				this.shop.describe = e.index;
				this.shop.describeInfo = this.scoreInfo(e.index);
			},
			logisticsChange(e) {
				this.shop.logistics = e.index;
				this.shop.logisticsInfo = this.scoreInfo(e.index);
			},
			serviceChange(e) {
				this.shop.service = e.index;
				this.shop.serviceInfo = this.scoreInfo(e.index);
			},
			jiyanChange(e) {
				this.shop.service = e.index;
				this.shop.serviceInfo = this.scoreInfo(e.index);
			},
			fuwuChange(e) {
				this.shop.service = e.index;
				this.shop.serviceInfo = this.scoreInfo(e.index);
			},
			jishiChange(e) {
				this.shop.service = e.index;
				this.shop.serviceInfo = this.scoreInfo(e.index);
			},
			// deliverChange(e) {
			// 	this.shop.deliver = e.index;
			// 	this.shop.deliverInfo = this.scoreInfo(e.index);
			// },
			scoreInfo(index) {
				if (index == 1) {
					return '极差';
				} else if (index == 2) {
					return '差';
				} else if (index == 3) {
					return '一般';
				} else if (index == 4) {
					return '好';
				} else if (index == 5) {
					return '极好';
				}
			}
		}
	};
</script>

<style>
	textarea::placeholder {
		color: #9C9C9C;
		font-size: 3.2vw;
	}

	.mr {
		margin-right: 5.86vw;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.edgeInsetBottom {
		height: 100rpx;
		height: calc(var(--window-bottom) + 100rpx);
	}

	.wanlian.cu-bar.tabbar {
		background-color: #F7F7F7;
	}

	.wanlian.cu-bar.tabbar .cu-btn {
		width: calc(100% - 50rpx);
	}

	.wanlian.cu-bar.tabbar .cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}
</style>